body{
    background: #161616;
    }
    h1{
      color: #000;
    }
    .lead{
      color:#aaa;
    }
    
    .wrapper{margin:10vh}
 
    
    .card{
      border: none;
      transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
     overflow:hidden;
     border-radius:20px;
     min-height:450px;
       box-shadow: 0 0 12px 0 rgba(0,0,0,0.2);
    
     @media (max-width: 768px) {
      min-height:350px;
    }
    
    @media (max-width: 420px) {
      min-height:300px;
    }
    
     &.card-has-bg{
     transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
      background-size:120%;
      background-repeat:no-repeat;
      background-position: center center;
      &:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: inherit;
        -webkit-filter: grayscale(1);
      -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);
      filter: grayscale(100%);}
    
      &:hover {
        transform: scale(0.98);
         box-shadow: 0 0 5px -2px rgba(0,0,0,0.3);
        background-size:130%;
         transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
    
        .card-img-overlay {
          transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
          background: rgb(255,186,33);
         background: linear-gradient(0deg, rgba(255,186,33,0.5) 0%, rgba(255,186,33,1) 100%);
         }
      }
    }
     .card-footer{
      background: none;
       border-top: none;
        .media{
         img{
           border:solid 3px rgba(255,255,255,0.3);
         }
       }
     }
      .card-title{font-weight:800}
     .card-meta{color:rgba(0,0,0,0.3);
      text-transform:uppercase;
       font-weight:500;
       letter-spacing:2px;}
     .card-body{ 
       transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
     
    
      }
     &:hover {
       .card-body{
         margin-top:30px;
         transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
       }
     cursor: pointer;
     transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
    }
     .card-img-overlay {
      transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
     background: rgb(255,186,33);
    background: linear-gradient(0deg, rgba(255,186,33,0.3785889355742297) 0%, rgba(255,186,33,1) 100%);
    }
    }
    @media (max-width: 767px){
      
    }